<template>
    <div :class="{ hasUnit: unit }">
        <el-input-number style="width: 100%;" :model-value="num" controls-position="right" @change="handleChange" />
        <span class="unit">{{ unit }}</span>
    </div>
</template>
<script setup>
import { computed } from "vue"
const props = defineProps({
    modelValue: {
        type: [String, Number],
        default: 0
    },
    unit: {
        type: String
    }
})
const num = computed(() => {
    return parseFloat(props.modelValue)
})

const emit = defineEmits(['update:modelValue'])

const handleChange = (val) => {
    emit('update:modelValue', props.unit ? val + props.unit : val)

}
</script>
<style lang="less" scoped>
.hasUnit {
    position: relative;

    .unit {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        font-size: 12px;
        padding: 0 4px;
    }

    :deep(.el-input-number__increase),
    :deep(.el-input-number__decrease) {
        display: none;
    }

    &:hover {

        :deep(.el-input-number__increase),
        :deep(.el-input-number__decrease) {
            display: block;
        }
    }
}
</style>